<script setup>
import { ref, onMounted } from 'vue'
import FlySituation from './component/fly-situation.vue'
import FlyNum from './component/fly-num.vue'
import EachartsComponent from './component/echarts-component.vue'
import FlyPlan from './component/fly-plan.vue'
// import { governmentOperationServer, aircraftServer } from '@/api'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { operationOverviewServer } from '@/api'
const airStore = useAirStore()
const { AirFlight, operationData } = storeToRefs(airStore)

// 飞机运营概况
// const governmentOperation = async (code) => {
//   const res = await governmentOperationServer({ snCode: code })
//   operationData.value = res.data
// }

// 获取运营概况信息
const get0perationOverview = async () => {
  const { data } = await operationOverviewServer({ flyType: 1 })
  operationData.value = data
}

const snCode = ref(null)
onMounted(() => {
  for (let i in AirFlight.value) {
    if (AirFlight.value[i].flyType == 1) {
      snCode.value = i
    }
  }
  get0perationOverview()
  // if (snCode.value) governmentOperation(snCode.value)
})
</script>
<template>
  <FlySituation></FlySituation>
  <CommonTitle title="运营航线概况" />
  <FlyNum></FlyNum>
  <CommonTitle title="运营架次趋势" />
  <EachartsComponent></EachartsComponent>
  <CommonTitle title="飞行任务列表" />
  <FlyPlan></FlyPlan>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background: left bottom url('@img/overview/navbar.png') no-repeat;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
          background-size: 120% 20px;

          &::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_left.png');
            background-size: 100% 100%;
          }

          &::after {
            position: absolute;
            top: 15px;
            right: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_right.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
